<template>
  <el-drawer :title="!dataForm.id ? '新增' : '修改'" :visible.sync="visible" :with-header="false" size="650px">
    <div class="right-container">
      <div class="container-header">
        <div style="font-size: 14px">学期设置</div>
        <div @click="handleClose">
          <i class="el-icon-close" style="font-size: 18px"></i>
        </div>
      </div>
      <div class="container-content background-color-grey padding-10">
        <div class="background-color-grey ">
          <el-tabs type="border-card" @tab-click="handleClick">

            <el-tab-pane label="基本信息">
              <div class="padding-lr-lg">
                <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
                  label-width="80px">

                  <el-form-item label="学年" prop="year">
                    <el-date-picker v-model="dataForm.year" type="year" placeholder="选择年">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="名称" prop="name">
                    <el-input v-model="dataForm.name" placeholder="名称"></el-input>
                  </el-form-item>
                  <el-form-item label="状态" size="mini" prop="status">
                    <el-radio-group v-model="dataForm.status">
                      <el-radio :label="0">停用</el-radio>
                      <el-radio :label="1">启用</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <el-form-item label="排序" prop="sort">
                    <div class="flex">
                      <el-input style="width: 100px" v-model="dataForm.sort" placeholder="排序"></el-input>
                      <div class="margin-left-sm text-gray">数字越大，排列靠前</div>
                    </div>
                  </el-form-item>
                  <el-divider content-position="left">学时要求</el-divider>

                  <div class="flex-container"> <!-- 新的容器，用于实现左右布局 -->
                    <div class="flex-item left-panel"> <!-- 左面板 -->
                      <el-form-item label="专业科目" prop="majorHours">
                        <el-input class="border-right-none" style="width: 100px" v-model="dataForm.majorHours"
                          placeholder=""></el-input>
                        <span class="padding-10">学时</span>
                      </el-form-item>
                      <el-form-item label="公需科目" prop="publicHours">
                        <el-input class="border-right-none" style="width: 100px" v-model="dataForm.publicHours"
                          placeholder=""></el-input>
                        <span class="padding-10">学时</span>
                      </el-form-item>

                    </div>
                    <div class="flex-item right-panel">
                      <el-form-item label="专业科目总价" prop="majorPrice" label-width="120px">
                        <el-input class="border-right-none" style="width: 100px" v-model="dataForm.majorPrice"
                          placeholder=""></el-input>
                        <span class="padding-10">元</span>
                      </el-form-item>
                      <el-form-item label="公需科目总价" prop="publicPrice" label-width="120px">
                        <el-input class="border-right-none" style="width: 100px" v-model="dataForm.publicPrice"
                          placeholder=""></el-input>
                        <span class="padding-10">元</span>
                      </el-form-item>
                    </div>
                  </div>
                  <el-form-item label="总学时" prop="creditHours">
                    <div class="flex">
                      <el-input style="width: 100px" v-model="dataForm.creditHours" placeholder=""></el-input>
                      <div class="margin-left-sm">学时</div>
                      <div class="margin-left-sm text-gray">累计学时需达到限定，0为不限制</div>
                    </div>
                  </el-form-item>
                  <el-form-item label="订单限价" prop="price">
                    <div class="flex">
                      <el-input style="width: 100px" v-model="dataForm.price" placeholder=""></el-input>
                      <div class="margin-left-sm">元</div>
                      <div class="margin-left-sm text-gray">订单最高价格限制，0为不限制
                      </div>
                    </div>
                  </el-form-item>


                </el-form>

              </div>
            </el-tab-pane>

            <el-tab-pane label="课程范围">
              <div
                class="flex justify-between align-center margin-bottom-sm padding-sm border-bottom padding-top-0 card-heard-title">
                <div>
                  <i class="el-icon-collection-tag" style="font-size: 18px"></i>
                  纳入统计范围的课程
                </div>
              </div>
              <div class="padding-lr-lg">
                <el-table ref="bindCourseData" :header-cell-style="tableHeaderStyle" :data="bindCourseDataList"
                  :height="height" border v-loading="dataListLoading" style="width: 100%;">

                  <el-table-column prop="name" header-align="left" align="left" label="课程名称">
                  </el-table-column>

                  <!-- <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" size="small">删除
                      </el-button>
                    </template>
                  </el-table-column> -->
                </el-table>
                <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                  :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                  layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
              </div>


            </el-tab-pane>
            <el-tab-pane label="通过条件">
              <div
                class="flex justify-between align-center margin-bottom-sm padding-lg border-bottom padding-top-0 card-heard-title">
                <div>
                  <i class="el-icon-collection-tag" style="font-size: 18px"></i>
                  设置说明
                </div>
              </div>
              <div class="padding-lr-lg padding-tb-md">
                <div style="border-left: 5px solid #16b777;height: 100px;border-radius: 2px 0 0 2px ; line-height: 1.6;"
                  class="font-14 padding-lg">
                  如果在此设置了必须学习的视频或者必须通过的考试，则学习考试的统计信息以设置的必学（必考）内容为准
                  <br>

                  如未设置必学必考内容，则学习考试的统计信息以学员的选课信息为准
                </div>
              </div>
            </el-tab-pane>

          </el-tabs>
        </div>


      </div>
      <div class="flex justify-center padding-10">
        <el-button type="primary" @click="dataFormSubmit">保存</el-button>
      </div>
    </div>

  </el-drawer>
</template>

<script>

export default {
  data() {
    return {
      height: 0,
      dataListLoading: false,
      tableHeaderStyle: { background: '#f5f7fa !important', height: '20px !important', padding: '4px !important' },
      direction: 'rtl',
      visible: false,
      bindCourseDataList: [],//绑定课程列表
      dataForm: {
        id: 0,
        year: '',
        name: '',
        status: 1,
        sort: 1,
        majorHours: '',
        majorPrice: '',
        publicHours: '',
        publicPrice: '',
        creditHours: '',
        price: '',
      },
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataRule: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        year: [
          { required: true, message: '学年不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    console.log(document.body.clientHeight)
    // 至于减去多少，这个要看你的页面高度和你想将滚动轴固定在哪里了，数值可以更换
    this.$nextTick(() => {
      let tableHeight = document.body.clientHeight - 275
      this.height = tableHeight
    })
  },
  created() {
  },
  methods: {
    handleClick() {
      this.repairTable()
    },
    getCoruseDataList() {
      this.$http({
        url: this.$http.adornUrl('/class/study/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.coruseDataList = data.page.list
          this.totalPage = data.page.totalCount
        }
      })
    },
    handleClose() {
      this.visible = false; // 关闭外层 Drawer 时不关闭内层 Drawer
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getCourseDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getCourseDataList()
    },

    //获取课程列表
    getCourseDataList() {
      this.$http({
        url: this.$http.adornUrl('/class/manage/list'),
        method: 'get',
        params: this.$http.adornParams({
          'page': this.pageIndex,
          'limit': this.pageSize,
          'studyId': this.dataForm.id,
          'status': 1
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.bindCourseDataList = data.page.list
          this.totalPage = data.page.totalCount

        } else {
          this.bindCourseDataList = []
          this.totalPage = 0
        }
        this.repairTable();
      })
    },
    repairTable() {
      this.$nextTick(() => {
        // _self.$refs.你的el-table的ref.doLayout()
        console.log(this.$refs.bindCourseData)
        this.$refs.bindCourseData.doLayout()
      })
    },
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
      if (this.dataForm.id) {
        this.$http({
          url: this.$http.adornUrl(`/class/study/info/${this.dataForm.id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            if (data.classStudy.year) {
              data.classStudy.year = new Date(data.classStudy.year + "")
            }
            console.log(data.classStudy)
            this.dataForm = Object.assign({}, this.dataForm, data.classStudy)
            this.getCourseDataList()
          }
        })
      }
    },
    // 表单提交
    dataFormSubmit() {
      let addParams = Object.assign({}, this.dataForm)
      if (addParams.year) {
        addParams.year = this.dataForm.year.getFullYear()
      }
      console.log(addParams)

      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/class/study/${!this.dataForm.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData(addParams)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.right-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container-header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px
}

.container-content {
  flex: 1;
}


.flex-container {
  display: flex;
  justify-content: space-between;
  /* 根据需要调整 */
}

.flex-item {
  flex: 1;
  /* 可以根据需要调整比例 */
  margin: 0 10px;
  /* 添加一些间距 */
}

.left-panel,
.right-panel {
  /* 在这里添加任何特定的样式，比如背景色、边框等 */
}

.el-tabs--border-card>.el-tabs__content {
  padding: 10px 0;
}
</style>
